<template>
    <div class="goods-list">
        <div class="goods-list-item" @click="toDetail">
            <div class="goods-top">
                <img src="https://img11.360buyimg.com/n7/jfs/t1/33066/2/15267/76580/5d1c80c8E05969f69/96b269b58ba3f0da.jpg"
                     alt=""/>
                <h3>小米 CC 9屏幕指纹 3200万美颜自拍 480</h3>
            </div>
            <div class="goods-info">
                <div class="goods-price">
                    <span class="new">￥1999</span>
                    &nbsp;
                    <span class="old">￥2100</span>
                </div>
                <div class="goods-hot">
                    <span class="hot">热卖中</span>
                    <span class="number">剩100件</span>
                </div>
            </div>
        </div>
        <div class="goods-list-item">
            <div class="goods-top">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/53679/32/1028/217626/5cebc494E799aca0e/b9b78195adbb4bc4.jpg"
                     alt=""/>
                <h3>小米 Redmi K20Pro 4800万超广角三摄 8</h3>
            </div>
            <div class="goods-info">
                <div class="goods-price">
                    <span class="new">￥1999</span>
                    &nbsp;
                    <span class="old">￥2100</span>
                </div>
                <div class="goods-hot">
                    <span class="hot">热卖中</span>
                    <span class="number">剩100件</span>
                </div>
            </div>
        </div>
        <div class="goods-list-item">
            <div class="goods-top">
                <img src="https://img14.360buyimg.com/n7/jfs/t1/20382/39/12581/229510/5c98ccd9E16dec112/8ecf0cb424de1349.jpg"
                     alt=""/>
                <h3>华为 HUAWEI P30 超感光徕卡三摄麒麟980AI智能芯片全面屏屏内指纹版手机8GB</h3>
            </div>
            <div class="goods-info">
                <div class="goods-price">
                    <span class="new">￥4288</span>
                    &nbsp;
                    <span class="old">￥4300</span>
                </div>
                <div class="goods-hot">
                    <span class="hot">热卖中</span>
                    <span class="number">剩100件</span>
                </div>
            </div>
        </div>
        <div class="goods-list-item">
            <div class="goods-top">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/34591/3/12765/165894/5d0cb6cbE2eb51f7e/6dc5606906c54cad.jpg"
                     alt=""/>
                <h3>OPPO K1 光感屏幕指纹 水滴屏拍照手机 4GB+64GB 梵星蓝</h3>
            </div>
            <div class="goods-info">
                <div class="goods-price">
                    <span class="new">￥1199</span>
                    &nbsp;
                    <span class="old">￥1300</span>
                </div>
                <div class="goods-hot">
                    <span class="hot">热卖中</span>
                    <span class="number">剩100件</span>
                </div>
            </div>
        </div>
        <div class="goods-list-item">
            <div class="goods-top">
                <img src="https://img10.360buyimg.com/n7/jfs/t1/1695/39/3482/70556/5b997bf7Ed2d65519/749d8efdff062fb0.jpg"
                     alt=""/>
                <h3>Apple iPhone XR (A2108) 128GB 白色 移动联通电信4G手机</h3>
            </div>
            <div class="goods-info">
                <div class="goods-price">
                    <span class="new">￥5399</span>
                    &nbsp;
                    <span class="old">￥5400</span>
                </div>
                <div class="goods-hot">
                    <span class="hot">热卖中</span>
                    <span class="number">剩100件</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script type="es6">
export default {
    data(){
        return {

        }
    },
    methods: {
        //编程式导航
        toDetail() {
            this.$router.push('/home/goodsinfo');
        }
    }
}
</script>
<style lang="less" scoped>
.goods-list {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    justify-content: space-between;
    .goods-list-item {
        width: 49%;
        border: 1px solid #ccc;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goods-top {
            img {
                width: 100%;
            }
            h3 {
                font-size: 14px;
                line-height: 1.5;
            }
        }
        .goods-info {
            background-color: #eee;
            padding: 2px;
            padding-top: 5px;
            .goods-price {
                .new {
                    color: red;
                    font-weight: bold;
                }
                .old {
                    text-decoration: line-through;
                    color: #888888;
                    font-size: 12px;
                }
            }
            .goods-hot {
                font-size: 12px;
                color: #888888;
                display: flex;
                justify-content: space-between;
            }

        }
    }
}
</style>